import { lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router';

const Layout = lazy(() => import('./routes/layout'));
const DesktopEditor = lazy(() => import('./routes/desktop/editor'));
const DesktopViewer = lazy(() => import('./routes/desktop/viewer'));
const MobileMain = lazy(() => import('./routes/mobile/main'));
const About = lazy(() => import('./routes/about'));

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* NOTE: / is main entry */}
        <Route element={<Layout />} path="/">
          <Route element={<DesktopEditor />} index />
          <Route element={<DesktopEditor />} path="editor/:workId" />
          <Route element={<DesktopViewer />} path="viewer/:workId" />
          <Route element={<DesktopViewer />} path="viewer" />
        </Route>
         {/* NOTE: mobile is main entry */}
        <Route element={<Layout />} path="/mobile">
          <Route element={<MobileMain />} index />
        </Route>
        {/* NOTE: /about */}
        <Route element={<About />} path="/about" />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
